<template>
  <view v-show="props.i === props.index">
    <!-- 分类区域 -->
    <down-bar :params="props.params" @search="search"></down-bar>

    <mescroll-body :ref="'mescrollRef'+i" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <!-- 数据列表 -->
      <view style="padding: 0 20rpx;box-sizing: border-box;">
        <article-item  v-for="item in resultCourseList" :item="item" :key="item.articleId"></article-item>
      </view>
    </mescroll-body>
  </view>
</template>

<script setup lang="ts">
  import downBar from './down-bar.vue'
  import api from '@/api/article.js'
  import articleItem from '@/components/common/article-item.vue'
  import {
    ref,
    reactive,
    getCurrentInstance,
    onMounted
  } from 'vue'
  const {
    proxy
  } = getCurrentInstance()
  const props = defineProps({
    params: {
      type: Object,
      default: null
    },
    inputContent: {
      type: String,
      default: ''
    },
    i: Number,
    index: {
      type: Number,
      default () {
        return 0
      }
    }
  })
  const downOption = reactive({ //下拉刷新参数
    offset: 60
  })
  const upOption = reactive({ //上拉加载参数
    page: {
      num: 0, //默认第零页，每次调用upCallback，num+1
      size: 10
    }
  })
  
  const searchCondition = reactive({
    content: null,
    sort: null,
    isFree: null,
    labelId: null,
    categoryId: null,
    searchPage: 1
  })
    let resultCourseList = ref([])
    
    onMounted(() => {
      if (props.params) {
        Object.keys(searchCondition).forEach(key => {
          searchCondition[key] = props.params[key] || null
        })
      }
      search()
    })
    
    
  const search = (condition) => {
    searchCondition.content = props.inputContent && props.inputContent.trim()
    if (condition && condition.type === 'sort') {
      searchCondition.sort = condition.id
    }
    if (condition && condition.type === 'isFree') {
      searchCondition.isFree = condition.id
    }
    if (condition && condition.labelId) {
    
      searchCondition.labelId = condition.labelId
      searchCondition.categoryId = condition.categoryId
    } else if (condition && condition.flag === 1) {
      searchCondition.labelId = condition.labelId
      searchCondition.categoryId = condition.categoryId
    }
    
    proxy.mescroll.resetUpScroll()
  }
  const upCallback = async (page) => {
    searchCondition.searchPage = 1
    const {
      data
    } = await api.getList(searchCondition, page.num, 10)
    
    if (page.num === 1) {
      resultCourseList.value = []
      proxy.mescroll.scrollTo(0, 0)
    }
    resultCourseList.value = [...resultCourseList.value, ...data.records]
    proxy.mescroll.endBySize(data.records.length, data.total)
    proxy.mescroll.endErr()
  }
  defineExpose({
    search
  })
</script>
<style>
</style>
